/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.8
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button
{
    margin: .4em;
    padding: 1em;
    cursor: pointer;
    background: #e1e1e1;
    text-decoration: none;
    color: #666666;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 2D TRANSITIONS */
/* Grow */
.grow
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .grow:hover, .grow:focus, .grow:active
    {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

/* Shrink */
.shrink
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .shrink:hover, .shrink:focus, .shrink:active
    {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

/* Pulse */
@-webkit-keyframes pulse
{
    25%
    {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    75%
    {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes pulse
{
    25%
    {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    75%
    {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.pulse
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse:hover, .pulse:focus, .pulse:active
    {
        -webkit-animation-name: pulse;
        animation-name: pulse;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

/* Pulse Grow */
@-webkit-keyframes pulse-grow
{
    to
    {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

@keyframes pulse-grow
{
    to
    {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }
}

.pulse-grow
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active
    {
        -webkit-animation-name: pulse-grow;
        animation-name: pulse-grow;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

/* Pulse Shrink */
@-webkit-keyframes pulse-shrink
{
    to
    {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@keyframes pulse-shrink
{
    to
    {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.pulse-shrink
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active
    {
        -webkit-animation-name: pulse-shrink;
        animation-name: pulse-shrink;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

/* Push */
@-webkit-keyframes push
{
    50%
    {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes push
{
    50%
    {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.push
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .push:hover, .push:focus, .push:active
    {
        -webkit-animation-name: push;
        animation-name: push;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Pop */
@-webkit-keyframes pop
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pop
{
    50%
    {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100%
    {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.pop
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .pop:hover, .pop:focus, .pop:active
    {
        -webkit-animation-name: pop;
        animation-name: pop;
        -webkit-animation-duration: 0.3s;
        animation-duration: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Rotate */
.rotate
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .rotate:hover, .rotate:focus, .rotate:active
    {
        -webkit-transform: rotate(4deg);
        transform: rotate(4deg);
    }

/* Grow Rotate */
.grow-rotate
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active
    {
        -webkit-transform: scale(1.1) rotate(4deg);
        transform: scale(1.1) rotate(4deg);
    }

/* Float */
.float
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .float:hover, .float:focus, .float:active
    {
        -webkit-transform: translateY(-5px);
        transform: translateY(-5px);
    }

/* Sink */
.sink
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .sink:hover, .sink:focus, .sink:active
    {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }

/* Hover */
@-webkit-keyframes hover
{
    50%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    100%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hover
{
    50%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    100%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

.hover
{
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hover:hover, .hover:focus, .hover:active
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-name: hover;
        animation-name: hover;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

/* Hang */
@-webkit-keyframes hang
{
    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }

    100%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

@keyframes hang
{
    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
    }

    100%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
    }
}

.hang
{
    display: inline-block;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hang:hover, .hang:focus, .hang:active
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        -webkit-animation-name: hang;
        animation-name: hang;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

/* Skew */
.skew
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .skew:hover, .skew:focus, .skew:active
    {
        -webkit-transform: skew(-10deg);
        transform: skew(-10deg);
    }

/* Skew Forward */
.skew-forward
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .skew-forward:hover, .skew-forward:focus, .skew-forward:active
    {
        -webkit-transform: skew(-10deg);
        transform: skew(-10deg);
    }

/* Skew Backward */
.skew-backward
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .skew-backward:hover, .skew-backward:focus, .skew-backward:active
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical
{
    16.65%
    {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    33.3%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    49.95%
    {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6%
    {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25%
    {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes wobble-vertical
{
    16.65%
    {
        -webkit-transform: translateY(8px);
        transform: translateY(8px);
    }

    33.3%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }

    49.95%
    {
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
    }

    66.6%
    {
        -webkit-transform: translateY(-2px);
        transform: translateY(-2px);
    }

    83.25%
    {
        -webkit-transform: translateY(1px);
        transform: translateY(1px);
    }

    100%
    {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.wobble-vertical
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active
    {
        -webkit-animation-name: wobble-vertical;
        animation-name: wobble-vertical;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal
{
    16.65%
    {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95%
    {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6%
    {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25%
    {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

@keyframes wobble-horizontal
{
    16.65%
    {
        -webkit-transform: translateX(8px);
        transform: translateX(8px);
    }

    33.3%
    {
        -webkit-transform: translateX(-6px);
        transform: translateX(-6px);
    }

    49.95%
    {
        -webkit-transform: translateX(4px);
        transform: translateX(4px);
    }

    66.6%
    {
        -webkit-transform: translateX(-2px);
        transform: translateX(-2px);
    }

    83.25%
    {
        -webkit-transform: translateX(1px);
        transform: translateX(1px);
    }

    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

.wobble-horizontal
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active
    {
        -webkit-animation-name: wobble-horizontal;
        animation-name: wobble-horizontal;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble To Bottom Right */
@-webkit-keyframes wobble-to-bottom-right
{
    16.65%
    {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }

    33.3%
    {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px);
    }

    49.95%
    {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
    }

    66.6%
    {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    83.25%
    {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }

    100%
    {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes wobble-to-bottom-right
{
    16.65%
    {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
    }

    33.3%
    {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px);
    }

    49.95%
    {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
    }

    66.6%
    {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
    }

    83.25%
    {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
    }

    100%
    {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.wobble-to-bottom-right
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active
    {
        -webkit-animation-name: wobble-to-bottom-right;
        animation-name: wobble-to-bottom-right;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble To Top Right */
@-webkit-keyframes wobble-to-top-right
{
    16.65%
    {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px);
    }

    33.3%
    {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px);
    }

    49.95%
    {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);
    }

    66.6%
    {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    83.25%
    {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px);
    }

    100%
    {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

@keyframes wobble-to-top-right
{
    16.65%
    {
        -webkit-transform: translate(8px, -8px);
        transform: translate(8px, -8px);
    }

    33.3%
    {
        -webkit-transform: translate(-6px, 6px);
        transform: translate(-6px, 6px);
    }

    49.95%
    {
        -webkit-transform: translate(4px, -4px);
        transform: translate(4px, -4px);
    }

    66.6%
    {
        -webkit-transform: translate(-2px, 2px);
        transform: translate(-2px, 2px);
    }

    83.25%
    {
        -webkit-transform: translate(1px, -1px);
        transform: translate(1px, -1px);
    }

    100%
    {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }
}

.wobble-to-top-right
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active
    {
        -webkit-animation-name: wobble-to-top-right;
        animation-name: wobble-to-top-right;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble Top */
@-webkit-keyframes wobble-top
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes wobble-top
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.wobble-top
{
    display: inline-block;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-top:hover, .wobble-top:focus, .wobble-top:active
    {
        -webkit-animation-name: wobble-top;
        animation-name: wobble-top;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble Bottom */
@-webkit-keyframes wobble-bottom
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes wobble-bottom
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.wobble-bottom
{
    display: inline-block;
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active
    {
        -webkit-animation-name: wobble-bottom;
        animation-name: wobble-bottom;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Wobble Skew */
@-webkit-keyframes wobble-skew
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

@keyframes wobble-skew
{
    16.65%
    {
        -webkit-transform: skew(-12deg);
        transform: skew(-12deg);
    }

    33.3%
    {
        -webkit-transform: skew(10deg);
        transform: skew(10deg);
    }

    49.95%
    {
        -webkit-transform: skew(-6deg);
        transform: skew(-6deg);
    }

    66.6%
    {
        -webkit-transform: skew(4deg);
        transform: skew(4deg);
    }

    83.25%
    {
        -webkit-transform: skew(-2deg);
        transform: skew(-2deg);
    }

    100%
    {
        -webkit-transform: skew(0);
        transform: skew(0);
    }
}

.wobble-skew
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active
    {
        -webkit-animation-name: wobble-skew;
        animation-name: wobble-skew;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* Buzz */
@-webkit-keyframes buzz
{
    50%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

@keyframes buzz
{
    50%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    100%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }
}

.buzz
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .buzz:hover, .buzz:focus, .buzz:active
    {
        -webkit-animation-name: buzz;
        animation-name: buzz;
        -webkit-animation-duration: 0.15s;
        animation-duration: 0.15s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
    }

/* Buzz Out */
@-webkit-keyframes buzz-out
{
    10%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    20%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    30%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    40%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    50%
    {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    60%
    {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    70%
    {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    80%
    {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    90%
    {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    100%
    {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

@keyframes buzz-out
{
    10%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    20%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    30%
    {
        -webkit-transform: translateX(3px) rotate(2deg);
        transform: translateX(3px) rotate(2deg);
    }

    40%
    {
        -webkit-transform: translateX(-3px) rotate(-2deg);
        transform: translateX(-3px) rotate(-2deg);
    }

    50%
    {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    60%
    {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    70%
    {
        -webkit-transform: translateX(2px) rotate(1deg);
        transform: translateX(2px) rotate(1deg);
    }

    80%
    {
        -webkit-transform: translateX(-2px) rotate(-1deg);
        transform: translateX(-2px) rotate(-1deg);
    }

    90%
    {
        -webkit-transform: translateX(1px) rotate(0);
        transform: translateX(1px) rotate(0);
    }

    100%
    {
        -webkit-transform: translateX(-1px) rotate(0);
        transform: translateX(-1px) rotate(0);
    }
}

.buzz-out
{
    display: inline-block;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .buzz-out:hover, .buzz-out:focus, .buzz-out:active
    {
        -webkit-animation-name: buzz-out;
        animation-name: buzz-out;
        -webkit-animation-duration: 0.75s;
        animation-duration: 0.75s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
        animation-iteration-count: 1;
    }

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

    .border-fade:hover, .border-fade:focus, .border-fade:active
    {
        box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
        /* Hack to improve aliasing on mobile/tablet devices */
    }

/* Hollow */
.hollow
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: background;
    transition-property: background;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
}

    .hollow:hover, .hollow:focus, .hollow:active
    {
        background: none;
    }

/* Trim */
.trim
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .trim:before
    {
        content: '';
        position: absolute;
        border: white solid 4px;
        top: 4px;
        left: 4px;
        right: 4px;
        bottom: 4px;
        opacity: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

    .trim:hover:before, .trim:focus:before, .trim:active:before
    {
        opacity: 1;
    }

/* Outline Outward */
.outline-outward
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .outline-outward:before
    {
        content: '';
        position: absolute;
        border: #e1e1e1 solid 4px;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: top, right, bottom, left;
        transition-property: top, right, bottom, left;
    }

    .outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before
    {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
    }

/* Outline Inward */
.outline-inward
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .outline-inward:before
    {
        pointer-events: none;
        content: '';
        position: absolute;
        border: #d68000 solid 4px;
        top: -16px;
        right: -16px;
        bottom: -16px;
        left: -16px;
        opacity: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: top, right, bottom, left;
        transition-property: top, right, bottom, left;
    }

    .outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before
    {
        top: -8px;
        right: -8px;
        bottom: -8px;
        left: -8px;
        opacity: 1;
    }

/* Round Corners */
.round-corners
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: border-radius;
    transition-property: border-radius;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .round-corners:hover, .round-corners:focus, .round-corners:active
    {
        border-radius: 1em;
    }

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .glow:hover, .glow:focus, .glow:active
    {
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    }

/* Box Shadow Outset */
.box-shadow-outset
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active
    {
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
    }

/* Box Shadow Inset */
.box-shadow-inset
{
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow;
    transition-property: box-shadow;
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
    /* Hack to improve aliasing on mobile/tablet devices */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

    .box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active
    {
        box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
        /* Hack to improve aliasing on mobile/tablet devices */
    }

/* Float Shadow */
.float-shadow
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .float-shadow:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        /* W3C */
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform, opacity;
        transition-property: transform, opacity;
    }

    .float-shadow:hover, .float-shadow:focus, .float-shadow:active
    {
        /*-webkit-transform: translateY(-5px);
        transform: translateY(-5px);
         move the element up by 5px */
    }

        .float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before
        {
            opacity: 1;
            -webkit-transform: translateY(5px);
            transform: translateY(5px);
            /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
        }

/* Hover Shadow */
@-webkit-keyframes hover
{
    50%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    100%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@keyframes hover
{
    50%
    {
        -webkit-transform: translateY(-3px);
        transform: translateY(-3px);
    }

    100%
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
    }
}

@-webkit-keyframes hover-shadow
{
    0%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        opacity: .4;
    }

    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
        opacity: 1;
    }

    100%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        opacity: .4;
    }
}

@keyframes hover-shadow
{
    0%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        opacity: .4;
    }

    50%
    {
        -webkit-transform: translateY(3px);
        transform: translateY(3px);
        opacity: 1;
    }

    100%
    {
        -webkit-transform: translateY(6px);
        transform: translateY(6px);
        opacity: .4;
    }
}

.hover-shadow
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .hover-shadow:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        top: 100%;
        left: 5%;
        height: 10px;
        width: 90%;
        opacity: 0;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
        /* W3C */
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: transform, opacity;
        transition-property: transform, opacity;
    }

    .hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active
    {
        -webkit-transform: translateY(-6px);
        transform: translateY(-6px);
        -webkit-animation-name: hover;
        animation-name: hover;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        animation-direction: alternate;
    }

        .hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before
        {
            opacity: .4;
            -webkit-transform: translateY(6px);
            transform: translateY(6px);
            -webkit-animation-name: hover-shadow;
            animation-name: hover-shadow;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-delay: 0.3s;
            animation-delay: 0.3s;
            -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            animation-direction: alternate;
        }

/* Shadow Radial */
.shadow-radial
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .shadow-radial:before, .shadow-radial:after
    {
        pointer-events: none;
        position: absolute;
        content: '';
        left: 0;
        width: 100%;
        box-sizing: border-box;
        background-repeat: no-repeat;
        height: 5px;
        opacity: 0;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: opacity;
        transition-property: opacity;
    }

    .shadow-radial:before
    {
        bottom: 100%;
        background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .shadow-radial:after
    {
        top: 100%;
        background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    }

    .shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after
    {
        opacity: 1;
    }

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-top:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        border-style: solid;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: top;
        transition-property: top;
        left: calc(50% - 10px);
        top: 0;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #e1e1e1 transparent;
    }

    .bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before
    {
        top: -10px;
    }

/* Bubble Right */
.bubble-right
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-right:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        border-style: solid;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: right;
        transition-property: right;
        top: calc(50% - 10px);
        right: 0;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #e1e1e1;
    }

    .bubble-right:hover:before, .bubble-right:focus:before, .bubble-right:active:before
    {
        right: -10px;
    }

/* Bubble Bottom */
.bubble-bottom
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-bottom:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        border-style: solid;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: bottom;
        transition-property: bottom;
        left: calc(50% - 10px);
        bottom: 0;
        border-width: 10px 10px 0 10px;
        border-color: #e1e1e1 transparent transparent transparent;
    }

    .bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before
    {
        bottom: -10px;
    }

/* Bubble Left */
.bubble-left
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-left:before
    {
        pointer-events: none;
        position: absolute;
        z-index: -1;
        content: '';
        border-style: solid;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: left;
        transition-property: left;
        top: calc(50% - 10px);
        left: 0;
        border-width: 10px 10px 10px 0;
        border-color: transparent #e1e1e1 transparent transparent;
    }

    .bubble-left:hover:before, .bubble-left:focus:before, .bubble-left:active:before
    {
        left: -10px;
    }

/* Bubble Float Top */
.bubble-float-top
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-top:before
    {
        position: absolute;
        z-index: -1;
        content: '';
        left: calc(50% - 10px);
        top: 0;
        border-style: solid;
        border-width: 0 10px 10px 10px;
        border-color: transparent transparent #e1e1e1 transparent;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: top;
        transition-property: top;
    }

    .bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active
    {
        -webkit-transform: translateY(5px) translateZ(0);
        transform: translateY(5px) translateZ(0);
    }

        .bubble-float-top:hover:before, .bubble-float-top:focus:before, .bubble-float-top:active:before
        {
            top: -10px;
        }

/* Bubble Float Right */
.bubble-float-right
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-right:before
    {
        position: absolute;
        z-index: -1;
        top: calc(50% - 10px);
        right: 0;
        content: '';
        border-style: solid;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent #e1e1e1;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: right;
        transition-property: right;
    }

    .bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }

        .bubble-float-right:hover:before, .bubble-float-right:focus:before, .bubble-float-right:active:before
        {
            right: -10px;
        }

/* Bubble Float Bottom */
.bubble-float-bottom
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-bottom:before
    {
        position: absolute;
        z-index: -1;
        content: '';
        left: calc(50% - 10px);
        bottom: 0;
        border-style: solid;
        border-width: 10px 10px 0 10px;
        border-color: #e1e1e1 transparent transparent transparent;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: bottom;
        transition-property: bottom;
    }

    .bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active
    {
        -webkit-transform: translateY(-5px) translateZ(0);
        transform: translateY(-5px) translateZ(0);
    }

        .bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before
        {
            bottom: -10px;
        }

/* Bubble Float Left */
.bubble-float-left
{
    display: inline-block;
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .bubble-float-left:before
    {
        position: absolute;
        z-index: -1;
        content: '';
        top: calc(50% - 10px);
        left: 0;
        border-style: solid;
        border-width: 10px 10px 10px 0;
        border-color: transparent #e1e1e1 transparent transparent;
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: left;
        transition-property: left;
    }

    .bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }

        .bubble-float-left:hover:before, .bubble-float-left:focus:before, .bubble-float-left:active:before
        {
            left: -10px;
        }

/* CURLS */
/* Curl Top Left */
.curl-top-left
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-top-left:before
    {
        pointer-events: none;
        position: absolute;
        content: '';
        height: 0;
        width: 0;
        top: 0;
        left: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
        filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
        /*For IE7-8-9*/
        z-index: 1000;
        box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: width, height;
        transition-property: width, height;
    }

    .curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before
    {
        width: 25px;
        height: 25px;
    }

/* Curl Top Right */
.curl-top-right
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-top-right:before
    {
        pointer-events: none;
        position: absolute;
        content: '';
        height: 0;
        width: 0;
        top: 0;
        right: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
        box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: width, height;
        transition-property: width, height;
    }

    .curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before
    {
        width: 25px;
        height: 25px;
    }

/* Curl Bottom Right */
.curl-bottom-right
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-bottom-right:before
    {
        pointer-events: none;
        position: absolute;
        content: '';
        height: 0;
        width: 0;
        bottom: 0;
        right: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
        box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: width, height;
        transition-property: width, height;
    }

    .curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before
    {
        width: 25px;
        height: 25px;
    }

/* Curl Bottom Left */
.curl-bottom-left
{
    display: inline-block;
    position: relative;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

    .curl-bottom-left:before
    {
        pointer-events: none;
        position: absolute;
        content: '';
        height: 0;
        width: 0;
        bottom: 0;
        left: 0;
        background: white;
        /* IE9 */
        background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
        box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
        -webkit-transition-duration: 0.3s;
        transition-duration: 0.3s;
        -webkit-transition-property: width, height;
        transition-property: width, height;
    }

    .curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before
    {
        width: 25px;
        height: 25px;
    }

.dropdown-menu > li > a:hover
{
    color: red;
    font-weight: bold;
    text-decoration: none !important;
    background-color: #d2d2d2;
}
